<template>
    <div class="list" ref="wrapper">
       <div>
       <div class="area">
           <div class="title border-topbottom">
           当前城市</div>
           <div class="butten-list"> 
               <div class="button-warper"
               ><div class="button">{{this.currentcity}}</div></div>
           </div>
           </div> 
            <div class="area">
        <div class="title border-topbottom">
        热门城市</div>
           <div class="butten-list"> 
               <div class="button-warper" v-for="item of hot" :key="item.id"
               @click="handlecityclick(item.name)"
               ><div class="button">{{item.name}}</div></div>
     
           </div> 
           
           </div>
       <div class="area" v-for="(item,key) of city" :key="key" :ref="key">
          <div class="title border-topbottom">
         {{key}}
           </div>
           <div class="item-list" >
              <div class="item border-bottom"
              v-for="innerItem of item" :key="innerItem.id"
               @click="handlecityclick(innerItem.name)"
              >{{innerItem.name}}</div> 
           </div>
           </div> 
          </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import BScroll from 'better-scroll'
export default {
 name:'CityList',
 computed:{
     ...mapState({
        currentcity:'city'
     })
   } ,
  props : {
       city:Object,
       hot:Array,
       letter:String
    },
 mounted (){
   this.scroll = new BScroll(this.$refs.wrapper)
 } ,
 watch:{
    letter () {
     if (this.letter) {
        const element=this.$refs[this.letter] [0]
        this.scroll.scrollToElement(element)
     }
    }
 },
 methods:{
    handlecityclick(city){
     this.changecity(city)
     this.$router.push('/')  
    },
    ...mapMutations(['changecity'])
 }

}
</script>

<style lang="stylus" scoped>
  @import '~styles/vieble.styl';
  .border-topbottom
     &:before
        border-color:#ccc
     &:after
        border-color:#ccc
   .border-bottom
     &:before
        border-color:#ccc
   .list
      overflow: hidden
      position :absolute
      top:1.78rem
      left :0
      right :0
      bottom :0          
      .title
         line-height :.54rem
         background :#eee
         padding-left :.2rem
         color #666
         font-size:.26rem
      .butten-list
         overflow: hidden
         padding :.1rem .6rem .1rem .1rem
         .button-warper
            float:left
            width :33.33%
            .button 
              padding :.1rem 0
              margin :.1rem
              text-align :center
              border:.02rem solid #ccc 
              border-radius :.06rem 
      .item-list
         .item
            line-height :.76rem
            padding-left:.2rem        
</style>

